<!--
 *
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug
 * 　　　┃　　　┃　　+
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 *
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-16 13:46:18
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-23 15:29:10
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <drawer-frame
    :title="`${user.name ? '编辑' : '提交'}工单`"
    @close="$emit('close')"
    @submit="handleSubmit"
  >
    <el-form ref="form" label-position="top" :model="model" :rules="rules">
      <el-form-item label="工单标题" prop="title">
        <el-input v-model="model.title" placeholder="工单标题"></el-input>
      </el-form-item>

      <el-form-item label="问题类型" prop="type">
        <el-select
          v-model="model.type"
          placeholder="问题类型"
          style="width: 100%"
        >
          <el-option label="故障" value="FAILURE"></el-option>
          <el-option label="咨询" value="COMPLAINT"></el-option>
          <el-option label="问题" value="QUESTION"></el-option>
          <el-option label="建议" value="SUGGESTION"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="紧急程度" prop="priority">
        <el-select
          v-model="model.priority"
          placeholder="紧急程度"
          style="width: 100%"
        >
          <el-option label="非常紧急" value="HIGHEST"></el-option>
          <el-option label="紧急" value="HIGH"></el-option>
          <el-option label="一般" value="MEDIUM"></el-option>
          <el-option label="不紧急" value="LOW"></el-option>
          <el-option label="非常不紧急" value="LOWEST"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属范围" prop="product">
        <el-select
          v-model="model.product"
          placeholder="所属范围"
          style="width: 100%"
        >
          <el-option label="账号相关" value="PASSPORT"></el-option>
          <el-option label="消息平台" value="MESSENGER"></el-option>
          <el-option label="聊天机器人" value="CHATBOT"></el-option>
          <el-option label="统计分析" value="STATISTICS"></el-option>
          <el-option label="文档和帮助" value="HELP"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细描述" prop="contents.content">
        <el-input
          v-model="model.contents.content"
          type="textarea"
          placeholder="详细描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="机密信息">
        <el-input
          v-model="model.contents.secretContent"
          type="textarea"
          placeholder="机密信息"
        ></el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <upload-file
          accept=".jpg, .jpeg, .png"
          :limit="6"
          multiple
          :file-size="1"
          @change="handleGetPic"
        >
          <!-- <template #tip>
            <div>1、格式为.JPG、.png，不超过1M；</div>
            <div>2、图片大小建议为280*280px</div>
          </template> -->
        </upload-file>
      </el-form-item>
    </el-form>
  </drawer-frame>
</template>
<script>
import UploadFile from '@/components/UploadFile'
export default {
  components: {
    'upload-file': UploadFile,
  },
  props: {
    user: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      model: {
        priority: '',
        product: '',
        title: '',
        type: '',
        contents: {
          content: '',
          images: [],
          secretContent: '',
        },
      },
      rules: {
        title: [
          {
            required: true,
            message: '请输入工单标题',
            trigger: 'blur',
          },
        ],
        contents: {
          content: [
            {
              required: true,
              message: '请输入详细描述',
              trigger: 'blur',
            },
          ],
        },
        priority: [
          {
            required: true,
            message: '请选择紧急程度',
            trigger: 'change',
          },
        ],

        type: [
          {
            required: true,
            message: '请选择问题类型',
            trigger: 'change',
          },
        ],
        product: [
          {
            required: true,
            message: '请选择所属范围',
            trigger: 'change',
          },
        ],
      },
    }
  },
  created() {},
  methods: {
    handleSubmit() {
      this.$refs.form.validate()
    },
    handleGetPic(arr) {
      this.model.contents.images = arr
    },
  },
}
</script>
<style lang="scss" scoped>
.password-tip {
  display: block;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-top: 8px;
  .inner {
    display: flex;
    align-items: center;

    .el-icon-warning {
      margin-right: 10px;
    }
    > div {
      flex: 1;
      white-space: normal;
      line-height: 1.8;
    }
  }
}
</style>
